import { createRouter, createWebHistory, createWebHashHistory, RouteRecordRaw } from 'vue-router';
import Home from '@/views/home/index.vue';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    component: Home,
  },
  {
    path: '/index',
    name: 'index',
    component: () => import(/* webpackChunkName: "about" */ '../views/index/index.vue'),
  },
  {
    path: '/select',
    name: 'select',
    component: () => import(/* webpackChunkName: "about" */ '../views/select/index.vue'),
  },
];

const router = createRouter({
  history: createWebHashHistory('/vue3'),
  routes,
});

export default router;

/**
 * createWebHashHistory
 * 这种模式采用 Hash 路由（或称为哈希路由），在 URL 中通过 "#" 符号来表示路由的变化。
 * Hash 路由的特点是，它实际上不会触发页面刷新，所有的路由切换都在同一个 HTML 页面内完成，通过监听 hashchange 事件来驱动页面变化
 */

/**
 * createWebHistory
 * 这种模式采用 HTML5 History API 来管理路由，生成的 URL 不包含 "#",
 * 使用 History 模式时，由于路由的变化会影响整个 URL，所以当用户直接在浏览器地址栏输入或刷新页面时，服务器必须能够正确处理这些 URL，并返回正确的应用程序入口点（通常是 index.html）。
 * 这就意味着在部署时通常需要服务器端配置重写规则，将所有未知路由都指向应用的入口文件。
 */

